<template>
  <d2-container>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="640px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form ref="formContent" :model="formContent" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="formContent.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formContent.mobile"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="formContent.content" rows="5"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>

    <el-button type="primary" size="small" @click="refresh">刷新</el-button>
    <el-divider></el-divider>
    <el-table :data="tableData" :stripe="true" :highlight-current-row="true">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="电话">
        <template slot-scope="scope">{{ scope.row.mobile }}</template>
      </el-table-column>
      <el-table-column label="内容">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template>
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="25"></el-pagination>
  </d2-container>
</template>

<script>
import { getLeaveList, deleteById } from "@api/cms.leavemessage";
import { Message, MessageBox } from "element-ui";

export function dateFormat(date) {
  let format = "yyyy-MM-dd hh:mm:ss";
  if (date !== "Invalid Date") {
    var o = {
      "M+": date.getMonth() + 1, // month
      "d+": date.getDate(), // day
      "h+": date.getHours(), // hour
      "m+": date.getMinutes(), // minute
      "s+": date.getSeconds(), // second
      "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
      S: date.getMilliseconds() // millisecond
    };
    if (/(y+)/.test(format)) {
      format = format.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(format)) {
        format = format.replace(
          RegExp.$1,
          RegExp.$1.length === 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }
    return format;
  }
  return "";
}

export default {
  data() {
    return {
      tableData: null,
      formContent: {
        name: "",
        mobile: "",
        content: "",
      },
      dialogVisible: false,
    }
  },
  
  filters: {
    dateFormat(time) {
      let date = new Date(time);
      return dateFormat(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  
  created: function() {
    getLeaveList() 
      .then(res => {
        console.log(res);
        this.tableData = res;
      })
      .catch(err => {
        console.log("err: ", err);
      });
  },
  
  methods: {
    handleDelete(index, row) {
      console.log(index, row);

      MessageBox.confirm("确认删除么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteById(row.id)
            .then(res => {
              console.log(res);
              if (res > 0) {
                Message({
                  type: "success",
                  duration: 1500,
                  message: "操作成功"
                });

                this.refresh();
              }
            })
            .catch(err => {
              console.log("err: ", err);
            });
        })
        .catch(() => {});
    },

    refresh() {
      getLeaveList({})
        .then(res => {
          console.log(res);
          this.tableData = res;
        })
        .catch(err => {
          console.log("err: ", err);
        });
    },

    handleDetail(index, row) {
      this.dialogVisible = true;
      this.formContent.name = row.name;
      this.formContent.mobile = row.mobile;
      this.formContent.content = row.content;
    },
  }
}
</script>
